<template>
  <div class="md-dict-select-business">
    <el-radio-group v-model="val" :disabled="disabled" @change="handleChange">
      <template v-if="radio==='radio'">
        <el-radio v-for="item in list" :key="item.id" :label="item[props.value]">{{item[props.label]}}</el-radio>
      </template>
      <template v-if="radio==='button'">
        <el-radio-button v-for="item in list" :key="item.id" :label="item[props.value]">{{item[props.label]}}</el-radio-button>
      </template>
    </el-radio-group>
  </div>
</template>

<script>
import { handleConvertToString } from '@/ddd/util.service.js'
export default {
  name: 'MdDictRadioGroupBusinessComponent',
  props: {
    value: [String, Number],
    /**
     * 缺省提示
     */
    placeholder: {
      type: String,
      default: '请选择'
    },
    /**
     * 自定义选项 value,label
     */
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 是否多选
     */
    multiple: {
      type: Boolean,
      default: false
    },
    /**
     * 配置选项
     */
    props: {
      type: Object,
      default: () => {
        return { label: 'dictLabel', value: 'dictValue' }
      }
    },
    /** 
     * 单选类型
     * radio
     * button
     */
    radio: {
      type: String,
      default: 'radio'
    },
    /** 
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      val: handleConvertToString(this.value),
      list: this.options
    }
  },
  watch: {
    value: {
      handler (val) {
        this.val = handleConvertToString(val)
      },
      deep: true,
      immediate: true
    },
    options: {
      handler (val) {
        this.list = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    this.val = handleConvertToString(this.value)
    this.list = this.options
  },
  methods: {
    handleChange (event) {
      this.$emit('input', event)
      this.$emit('change', event)
    }
  }
}
</script>